<template>
	<el-dialog v-model="dialogVisible" :title="formText" :destroy-on-close="true" width="1200">
		<div class="selectUser" v-loading="loading">
		

			<div class=" app_ny" style="margin-bottom: 10px;">
				<div class="div2" style="position: relative">
					<el-row :gutter="12" style="width: 100%">
						<el-col :span="4">
							<el-input v-model="queryParams.name" placeholder="请输入物品名称" clearable />
						</el-col>
						
						<el-col :span="4">
							<el-input v-model="queryParams.sku" placeholder="请输入物品编码" clearable />
						</el-col>
						<el-col :span="4">
							<el-input v-model="queryParams.brand" placeholder="请输入品牌" clearable />
						</el-col>
						<el-col :span="4">
							<el-input v-model="queryParams.specs" placeholder="请输入规格型号" clearable />
						</el-col>
						<el-col :span="8">
							<el-button :loading="loading" type="primary" @click="handleQuery">
								<template #icon><i-ep-search /></template>查询</el-button>
							<el-button :loading="loading" type="primary" @click="handleSubmit">
								<template #icon><i-ep-pointer /></template>添加</el-button>

						</el-col>
					</el-row>
					<FilterColumn class="filtBox" @handleRefresh="resetQuery()" :columns="false"></FilterColumn>
				</div>
			</div>


			<el-table ref="dataTableRef" size="small"  v-loading="loading" :data="tableData" align="left" tooltip-effect="dark"
				:show-overflow-tooltip="true" border>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" label="序号" align="center" width="60" />
				<el-table-column label="仓位" align="center" prop="position" min-width="200" />
				<el-table-column label="图片" align="center"  width="60" prop="image">
						<template #default="scope">
							<el-image style="width: 34px; height: 34px" :src="scope.row.image" :zoom-rate="1.2" :max-scale="7"
								:min-scale="0.2" :preview-src-list="[scope.row.image]" :initial-index="0" fit="cover" />
						</template>
					</el-table-column>
					<el-table-column label="名称" align="center" prop="name" min-width="140"></el-table-column>
					<el-table-column label="编码" align="center" prop="sku" min-width="100" />
					<el-table-column label="物料号" align="center" prop="part_no" min-width="100"></el-table-column>
					<el-table-column label="品牌" align="center" prop="brand" min-width="100" />
					<el-table-column label="规格型号" align="center" prop="specs" min-width="100" />
					<el-table-column label="单位" align="center" prop="unit" min-width="60" />
					<el-table-column label="备注" align="center" prop="mark" min-width="150"></el-table-column>
					<el-table-column label="库存" align="center" prop="num" width="100" fixed="right">
					<template #default="scope">
						<el-text :type="scope.row.num >0? 'Primary':'danger'">{{scope.row.num}}</el-text>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</div>
		
	</el-dialog>
</template>


<script setup lang="ts">
	defineOptions({
		name: "Stockroom",
		inheritAttrs: false,
	});

	//接口地址
	import {
		getGoodsSelect
	} from "@/api/wms";
	import { assign } from 'lodash';

	const props = defineProps<{
		sid : any
	}>();

	const emit = defineEmits(['getSelectItems']);

	const dataTableRef = ref();
	const queryParams = reactive({
		page: 1,
		limit: 20,
		cid: "",//公司
		sid:"",
		name: "",//物品名称
		sku: "",//编码
		brand: "",//品牌
		specs: "",//规格
		part_no: ""//编号
	})
	const loading = ref(false);
	const total = ref(0);
	const tableData = ref();
	const dialogVisible = ref(false);
	const dialogStatus = ref<string>(""); // 操作行为 formText
	const formText = ref<string>(""); // 操作窗口标题
	const parentsData = ref<any>();//父级传来的参数

	//新增或者修改加载load按钮
	function handleShow(row : any, act : string) {
		console.log(row)
		parentsData.value = row;
		formText.value = "物品信息";
		dialogStatus.value = act;
		queryParams.cid = row.cid || row.outbound_cid;
		queryParams.sid =row.sid || row.outbound_sid;
		dialogVisible.value = true;
		handleQuery();
	}

	function handleSubmit() {
		const selectItems = dataTableRef.value.getSelectionRows();
		const hasZero = selectItems.some(item => item.num == '0.0000' || item.num <= 0);
		if (hasZero) {
			ElMessage({
				message: '存在库存数不足的物品',
				type: 'error'
			})
			return false;
		}
		dialogVisible.value =false;
		emit("getSelectItems", selectItems)
	}

	function handleQuery() {
		loading.value = true;
		getGoodsSelect(queryParams).then((res) => {
			console.log(res)
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false;
		})
	}
	function resetQuery() {

		handleQuery();
	}
	defineExpose({
		handleShow
	});
	onMounted(() => {

		// handleQuery();

	})
</script>


<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.min220 {
		width: 220px
	}
</style>